<template>
    <u-navbar
        title="发布动态"
        autoBack
        placeholder
        height="44px"
    >
    </u-navbar>
    <view class="app-container" style="padding-bottom: 220rpx;">
        <view class="align-center mb26">
            <i class="iconfont icon-huati"></i>
            <text class="font30 ml8">请选择话题</text>
        </view>
        <view class="align-center mb36" style="gap: 26rpx;">
            <view v-for="item in 3" :key="5" :class="['tips', state.current === item ? 'tips-active' : '']" @click="changeTips(item)">体育器材</view>
        </view>
        <view class="title-input mb26">
            <u-input placeholder="请输入标题" border="none"></u-input>
        </view>
        <u-textarea placeholder="请输入内容" border="none"></u-textarea>
        <view class="font26 grey mb26">图片/视频上传</view>
        <u-upload name="1" multiple :maxCount="10"></u-upload>
        <view class="align-center box">
            <i class="iconfont icon-mianxinglianxifangshi" style="font-size: 50rpx; color: #575757;"></i>
            <view class="ml20 align-center">
                <text class="font28">联系方式：</text>
                <text class="font20 grey">如有联系方式，请填写在此处，仅实名用户可见</text>
            </view>
        </view>
        <view class="align-center box">
            <i class="iconfont icon-niming" style="font-size: 50rpx; color: #575757;"></i>
            <view class="flex1 justify-between ml20">
                <view class="font28">匿名</view>
                <u-switch activeColor="#966BFF"></u-switch>
            </view>
        </view>
        <view class="font24 grey mt26">*请按<text class="purple">社区规范</text>合理发布，如有违规会被删除，严重乃至封号</view>
        <view class="footer">
        <view class="btn">发布</view>
    </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const state = ref({
    current: 0,
})

const changeTips = (val:number) => {
    state.value.current = val;
}
</script>

<style scoped lang="scss">
::v-deep {
    .u-textarea__field {
        height: 200rpx !important;
    }
}

.tips {
    padding: 10rpx 26rpx;
    background: #F8F8FA;
    border-radius: 28rpx;
    font-size: 26rpx;
    color: #B1B1B1;
}

.tips-active {
    background: #966BFF;
    color: #FFFFFF;
}

.title-input {
    padding: 24rpx 0;
    border-top: 1rpx solid #F5F5F5;
    border-bottom: 1rpx solid #F5F5F5;
    font-size: 24rpx;
    font-weight: 800;
}

.box {
    padding: 24rpx 0;
    border-top: 1rpx solid #F5F5F5;
    border-bottom: 1rpx solid #F5F5F5;
}

.footer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36rpx 26rpx 70rpx 71rpx;
    background: #fff;
    box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(196, 196, 196, 0.16);
    border-radius: 30rpx 30rpx 0 0;

    .btn {
        width: 450rpx;
        height: 80rpx;
        background: #966BFF;
        border-radius: 46rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 30rpx;
        font-weight: 800;
        color: #fff;

        &:active {
            opacity: .7;
        }
    }
}
</style>